<template>
  <div class="container">
    <div v-for="n in 21">
      <heavy-comp class="block" v-if="defer(n)"></heavy-comp>
    </div>
    <!-- <div class="block" v-if="defer(1)">
      <heavy-comp></heavy-comp>
    </div>
    <div class="block" v-if="defer(100)">
      <heavy-comp></heavy-comp>
    </div>
    <div class="block" v-if="defer(200)">
      <heavy-comp></heavy-comp>
    </div> -->
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import HeavyComp from "./HeavyComp.vue";
const frameCount = ref(0);
onMounted(() => {
  const refreshFrameCount = () => {
    requestAnimationFrame(() => {
      frameCount.value++;
      //这里21和模板中的21是你需要渲染多少个组件，根据实际情况而定
      if (frameCount.value < 21) {
        refreshFrameCount();
      }
    });
  };
  refreshFrameCount();
});
function defer(showInFrameCount) {
  return frameCount.value >= showInFrameCount;
}
</script>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
}
.block {
  border: 3px solid #f40;
}
</style>
